<template>
  <view class="home-comm">
    <!-- https://z-paging.zxlee.cn/start/install.html -->
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

      <!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
      <!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
      <template #refresher="{ refresherStatus }">
        <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
        <CustomRefresher :status="refresherStatus" />
      </template>
      <!-- 自定义没有更多数据view -->
      <template #loadingMoreNoMore>
        <!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
        <CustomNomore />
      </template>
      <!-- 自定义加载更多view -->
      <template #loading>
        <!-- 此处的custom-full-loading为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
        <CustomFullLoading />
      </template>

      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <view class="chat">
        <view class="chat-title">最近聊天</view>
        <view class="list-chat">
          <!-- <view class="item" v-for="(item, index) in dataList" :key="index">
            <view class="serial-number">
              <view>
                {{ item.detail }}
              </view>
            </view>
          </view> -->
          <CardItem
            v-for="(card, index) in dataList"
            :key="card.role_id"
            :data="card"
            type="chat"
            @click="(data) => handerEvent('onCardClick', data)"
            @delete="(data) => handerEvent('deleteCard', data)"
          />
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import request from "@/utils/zpagingrequest.js";
import CustomNomore from "./components/CustomNomore/index.vue";
import CustomRefresher from "./components/CustomRefresher/index.vue";
import CardItem from "../../TBMComponents/components/CardsItem/index.vue";
import CustomFullLoading from "../../TBMComponents/components/CustomFullLoading/index.vue";
import ChatAPI from "@/api/system/chat";
import { useCardsStore } from "@/store/index";

const cardsStore = useCardsStore();
const paging = ref(null);
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([]);

const loading = ref(true);
const keyword = ref("");
const props = defineProps();

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = async (pageNum, pageSize) => {
  // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 模拟请求服务器获取分页数据，请替换成自己的网络请求

  // 模拟数据
  const params = {
    pageNo: pageNum,
    pageSize: pageSize,
    type: 1,
  };
  // request
  //   .queryList(params)
  //   .then((res) => {
  //     // 将请求的结果数组传递给z-paging
  //     paging.value.complete(res.data.list);
  //   })
  //   .catch((res) => {
  //     // 如果请求失败写this.$refs.paging.complete(false);
  //     // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
  //     // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
  //     paging.value.complete(false);
  //   });
  const paramsList = {
    start: (pageNum - 1) * pageSize,
    size: pageSize,
    token: "123456789",
  };

  let paramsListRes = await ChatAPI.getBoundRolesList(paramsList);
  console.log(
    "%c getInit 角色列表 res2: ",
    "color: #1E90FF; font-weight: bold;",
    paramsListRes
  );
  console.log(
    "%c getInit paramsList2: ",
    "color: #1E90FF; font-weight: bold;",
    paramsList
  );
  paging.value.complete(paramsListRes.data);
};
const handerEvent = async (eType, eData) => {
  console.log("%c :handerEvent eType", "color: #1E90FF; font-weight: bold;", eType);
  console.log("%c :handerEvent eData", "color: #1E90FF; font-weight: bold;", eData);

  switch (eType) {
    case "onCardClick":
      console.log("点击了卡片：", eData);
      cardsStore.setCurrentCard(eData);
      uni.navigateTo({
        url: "/pages/cardsDetail/index",
      });
      break;
    case "deleteCard":
      console.log("删除了卡片：", eData);
      let deleteParams = {
        role_id: eData.role_id,
        token: "123456789",
      };
      let deleteRes = await ChatAPI.deleteBind(deleteParams);
      console.log("%c  deleteCard: ", "color: #1E90FF; font-weight: bold;", deleteRes);
      console.log(
        "%c deleteCard deleteParams: ",
        "color: #1E90FF; font-weight: bold;",
        deleteParams
      );
      paging?.value?.reload();
      break;

    default:
      break;
  }
};

onLoad((option) => {
  console.log(option, "==home=option====");
  paging?.value?.reload();
});

const getInit = async () => {
  console.log("getInit====home======");
};
onShow(() => {
  console.log("show home");
  paging?.value?.reload();
});

// watch(() => props.pageData, () => {
// 	console.log( props,"===== props.pageData props.pageData");
// 	console.log( props.pageData.type,"===== type.type type.type");
// 	getInit()
// }, {
// 	immediate: true,
// 	deep: true
// })

onMounted(() => {
  console.log(props, "===== props.pageData props.pageData");
  getInit();
  // uni.showLoading({
  // 	title: "加载中",
  // 	mask: true
  // });
  // getInit()
  // console.log(props, "===props===props===");
  // setTimeout(() => {
  // 	uni.hideLoading()
  // }, 1500)
});
</script>

<style scoped lang="scss">
.home-comm {
  height: 100%;
  overflow: hidden;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;

  .chat {
    height: 100%;
    width: 100%;
    .chat-title {
      height: 60rpx;
      line-height: 60rpx;
      font-size: 26rpx;
      color: var(--text-primary);
      padding-left: 24rpx;
    }
    .list-chat {
      // background-position: center center;
      margin-bottom: 50rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 24rpx;
      box-sizing: border-box;

      // 渐变边框 伪元素+透明边框
      border: 4rpx solid transparent;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      // background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #8f41e9, #578aef);
      .item {
        width: 100%;
        height: 600rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
